<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- <link rel="stylesheet" href="./css/element.css"> -->
<link rel="stylesheet" href="./css/main.css">

<!-- 引入组件库 -->
<script type="text/javascript" src="./js/vue.min.js"></script>
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
<script src="./js/element.js"></script>
<!-- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> -->
<script src="./js/vue-router.js"></script>

<!-- border-red -->
<div id="app" class="layout"> 
  <!-- 资料 -->
  <div>
    <h2>资料</h2>
    <div class="context">
      <p>
        <a target="_blank" class="el-link el-link--primary is-underline" href="https://element.eleme.cn/#/zh-CN/component/layout">
          <span class="el-link--inner">element-ui官网</span> 
        </a>
      </p>
      <p>
        <a target="_blank" class="el-link el-link--primary is-underline" href="https://cn.vuejs.org/v2/guide/">
          <span class="el-link--inner">vue官网</span>
        </a>
      </p>
      <p>
        <a target="_blank" class="el-link el-link--primary is-underline" href="https://router.vuejs.org/zh/">
          <span class="el-link--inner">router官网</span>
        </a>
      </p>
      <p>
        <a target="_blank" class="el-link el-link--primary is-underline" href="https://panjiachen.github.io/vue-element-admin/#/table/dynamic-table">
          <span class="el-link--inner">vue-element-admin</span>
        </a>
      </p>

      <p>
        <a target="_blank" class="el-link el-link--primary is-underline" href="https://bp.huijiewei.com/admin">
          <span class="el-link--inner">自定义模型：账号：13098761234 密码：123456</span>
        </a>
      </p>
      <p>
        <a target="_blank" class="el-link el-link--primary is-underline" href="https://www.cnblogs.com/gg-qq/p/10844020.html">
          <span class="el-link--inner">el-table样式修改</span>
        </a>
      </p>
      <p>
        <a target="_blank" class="el-link el-link--primary is-underline" href="https://www.jb51.net/article/148387.htm">
          <span class="el-link--inner">精简优质文档</span>
        </a>
      </p>
      
    </div>
  </div>

  <!-- 计划 -->
  <div>
    <h2>规划</h2>
    <div class="context">
      <p>
        1、建立公共js和css应用
      </p>
    </div>
  </div>

  <h2>记录</h2>
  <div class="block">
    <el-timeline>
      <el-timeline-item timestamp="2020/7/213" placement="top">
        <el-card>
          <h4>1、实例</h4>
          <p>添加按钮、连接、布局、容器布局实例</p>
          <p>按模块拆分目录</p>
          <h4>2、优化表单</h4>
          <p>增加弹窗和加载状态图</p>
        </el-card>
      </el-timeline-item>

      <el-timeline-item timestamp="2020/5/25" placement="top">
        <el-card>
          <h4>1、优化实例</h4>
          <p>增加实例代码，并优化展示。</p>
          <h4>2、优化模板语法</h4>
          <p>增加指令和缩写</p>
        </el-card>
      </el-timeline-item>

      <el-timeline-item timestamp="2020/4/29" placement="top">
        <el-card>
          <h4>1、更新vue介绍和安装</h4>
          <p>详细介绍vue和element组件相关使用方法。</p>
        </el-card>
      </el-timeline-item>

      <el-timeline-item timestamp="2020/4/28" placement="top">
        <el-card>
          <h4>1、增加本地element</h4>
          <p>通过f12获取css加载的tff文件element-icons.woff、element-icons.ttf，实现离线资源记载。增加开发记录</p>
          <h4>2、添加开发记录</h4>
          <p>记录搜索的功能和遇到的问题及解决方案。</p>
          <h4>3、优化页面布局</h4>
          <p>将原本上下（左右）修改为左右（上下），并修复排版小bug。</p>
          <h4>4、增加公共样式</h4>
          <p>添加公共样式css文件。</p>
        </el-card>
      </el-timeline-item>

      <el-timeline-item timestamp="2020/4/27" placement="top">
        <el-card>
          <h4>创建项目</h4>
          <p>搭建vue学习环境，基于element-ui创建项目整体布局，和样式展示，后续边学习，边记录。考虑加入json自动读取配置，记录各个阶段知识。</p>
        </el-card>
      </el-timeline-item>

    </el-timeline>
  </div>
</div>

<script>

new Vue().$mount('#app')

</script>